<template>
  <div class="store-shelf">
    <ShelfTitle></ShelfTitle>
    <Scroll
      class="store-shelf-scroll-wrapper"
      :top="0"
      :bottom="scrollBottom"
      @onScroll="onScroll"
      ref="scroll"
    >
      <ShelfList :top="42"></ShelfList>
    </Scroll>
    <ShelfFooter></ShelfFooter>
  </div>
</template>

<script>
import Scroll from '@/components/common/Scroll.vue';
import ShelfTitle from '@/components/shelf/ShelfTitle.vue';
import ShelfList from '@/components/shelf/ShelfList.vue';
import ShelfFooter from '@/components/shelf/ShelfFooter.vue';

import { storeShelfMixin } from '@/utils/mixin';

export default {
  mixins: [storeShelfMixin],
  components: {
    ShelfTitle,
    Scroll,
    ShelfList,
    ShelfFooter,
  },
  watch: {
    isEditMode(isEditMode) {
      this.scrollBottom = isEditMode ? 48 : 0;
      this.$nextTick(() => this.$refs.scroll.refresh());
    },
  },
  data() {
    return {
      scrollBottom: 0,
    };
  },
  methods: {
    // 滚动事件
    onScroll(offsetY) {
      this.setOffsetY(offsetY);
    },
  },
  mounted() {
    this.getShelfList();
  },
};
</script>

<style scoped lang="scss">
@import '../../assets/styles/global';
.store-shelf {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: #fff;

  .store-shelf-scroll-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
  }
}
</style>
